<template>
    <div>
        <a-button type='primary' @click='addCategory(0)'>{{$c('add', 'category')}}</a-button>
    </div>
    <div class='m-t-20'>
        <BTable :columns='columns' :data='dataRows' row-key='id'>
            <template #$action='{record}'>
                <BTextButton @click='addCategory(record.id)'>{{$t('add')}}</BTextButton>
            </template>
        </BTable>   
    </div>


    <BDrawer v-model:visible='visible' :title='dialogTitle' width='600px' :confirm='submit'>
        <Edit :parent-id="currentParentId" :row="currentRow" ref="formRef" />
    </BDrawer>
</template>

<script lang='ts' setup>
import { listApi, saveApi, deleteApi } from '@/api/help/Category';
    import { useI18nStore } from "@/store/i18n";
    import { parseTime, recursionFn } from "@/utils";
    import { message, Modal } from "ant-design-vue";
    import { computed, ref } from "vue";
    import Edit from './Edit.vue';

    const i18n = useI18nStore()

    const visible = ref(false)
    const formRef = ref()
    const dialogTitle = ref()

    const currentRow = ref<any>()
    const currentParentId = ref(0)


    const columns = ref<Column[]>([
        {
            dataIndex : 'name',
            title : i18n.t('name'),
            translate : true,
        },

        {
            dataIndex : 'code',
            title : i18n.t('code'),
            translate : true,
        },

        {
            dataIndex : 'sort',
            title : i18n.t('sort'),
        },

        {
            dataIndex : 'remark',
            title : i18n.t('remark'),
        },

        {
            title : '创建时间',
            dataIndex : 'createTime',
            customRender({ text }) {
                return parseTime(text)
            }
        },

        {
            title : '修改时间',
            dataIndex : 'updateTime',
            customRender({ text }) {
                return parseTime(text)
            }
        },

        {
            dataIndex : '$action',
            title : i18n.t('operation'),
            align : 'center',
            width : 150,
            $edit(row) {

                dialogTitle.value = i18n.t('edit')
                currentRow.value = row
                visible.value = true
            },

            async $delete(row) {
                const res = await  deleteApi(row.id)
                if(res.success) {
                    getList()
                    message.success(i18n.t('deleteSuccess'))
                }else {
                    message.error(res.msg)
                }
            }
            
        },
    ])

    
    const dataRows = ref<any[]>([])
    

    function getList() {
        listApi().then(res => {
            dataRows.value = recursionFn(res.data, Math.min(...res.data.map(row => row.parentId)), 'id', 'parentId', 'children')
        })
    }

    function addCategory(parnetId:number) {
        currentParentId.value = parnetId
        currentRow.value = null
        dialogTitle.value = i18n.t("add")
        visible.value = true
    }

    function update(row) {
        dialogTitle.value = i18n.t('edit')
        currentRow.value = row
        visible.value = true
    }

    async function submit(){
        const res = await formRef.value.submit()
        if(res.success) {
            getList()
            visible.value = false
            message.success('保存成功')
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }

    getList()
</script>

<style lang='scss' module>
    .cateogryItem{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
</style>